<template>
  <header>
    <div class="logo">
      <el-avatar
        shape="square"
        :size="80"
        fit="fill"
        src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
      ></el-avatar>
    </div>
    <div class="navbar">
      <el-row class="navbar-tab">
        <el-col :span="8" class="navbar-tab__templatename">
          <span>模板名称XXX</span>
        </el-col>
        <el-col :span="8">
          <ul class="navbar-tablist">
            <li
              v-for="(tab, index) in tabs"
              :key="index"
              @click="toggle(index, tab.view)"
              :class="{ navtabactive: navtabactive == index }"
            >
              {{ tab.type }}
            </li>
          </ul>
        </el-col>
        <el-col
          :span="8"
          class="navbar-tab__cooperation"
          style="pointer-events: none"
        >
          <el-button>协作</el-button>
          <span>X人协作</span>
        </el-col>
      </el-row>

      <div class="section-navbar">
        <div hidden-sm-only>
          <el-button size="mini">保存</el-button>
          <el-button size="mini">预览</el-button>
          <el-button size="mini">打印</el-button>
          <i class="icons icons-undo" title="撤销(Ctrl+Z)"></i>
          <i class="icons icons-redo" title="恢复(Ctrl+Y)"></i>
        </div>
        <div class="navbar-slide" ref="navslide">
          <component
            :is="currentView"
            :isiconTitle="iconTitle"
            @showLeftMenu="showLeftMenu"
            @showRightMenu="showRightMenu"
          ></component>
          <div class="roll-btn left-btn" @click="rollmove('left')"></div>
          <div class="roll-btn right-btn" @click="rollmove('right')"></div>
        </div>
      </div>
    </div>
  </header>
</template>

<script>
import navBase from "@/components/navPanes/navBase";
import navInsertion from "@/components/navPanes/navInsertion";
import navApprove from "@/components/navPanes/navApprove";
import navPage from "@/components/navPanes/navPage";
import navTable from "@/components/navPanes/navTable";
import navShape from "@/components/navPanes/navShape";
export default {
  name: "Header",
  data() {
    return {
      navtabactive: 0,
      currentView: "navBase",
      tabs: [
        {
          type: "基础",
          view: "navBase",
        },
        {
          type: "插入",
          view: "navInsertion",
        },
        {
          type: "审阅",
          view: "navApprove",
        },
        {
          type: "页面",
          view: "navPage",
        },
        {
          type: "表格",
          view: "navTable",
        },
        {
          type: "形状",
          view: "navShape",
        },
      ],
      navslide: null,
      navposition: 0,
      iconTitle: false,
    };
  },
  methods: {
    toggle(i, v) {
      this.navtabactive = i;
      this.currentView = v;
      this.$refs.navslide.scrollLeft = 0;
    },
    rollmove(direction) {
      //导航栏移动
      if (direction == "left") {
        this.navposition = 0;
        this.$refs.navslide.scrollLeft = this.navposition;
      } else if (direction == "right") {
        this.navposition += 40;
        this.$refs.navslide.scrollLeft = this.navposition;
      }
    },
    showLeftMenu() {
      this.$parent.showLeftMenu();
      // console.log(());
    },
    showRightMenu() {
      console.log("showright");
      this.$parent.showRightMenu();
    },
  },
  components: {
    navBase,
    navInsertion,
    navApprove,
    navPage,
    navTable,
    navShape,
  },
};
</script>

<style lang="scss" scoped>
header {
  display: grid;
  grid-template-columns: 80px 1fr;
  grid-template-rows: 80px;
}
.navbar-tab {
  background-color: #f2f2f2;
  height: 40px;

  &__templatename {
    line-height: 40px;
    text-indent: 20px;
    font-weight: 600;
  }
  &__cooperation {
    line-height: 40px;
    span {
      float: right;
      margin-right: 10px;
    }
    button {
      float: right;
      margin-top: 4px;
      margin-right: 10px;
    }
  }
  .el-tabs__header {
    margin: 0;
  }
  .navbar-tablist {
    display: grid;
    grid-template-columns: repeat(6, 60px);
    grid-template-rows: 40px;
    place-items: center;
    color: #000;
    font-weight: 600;
    cursor: pointer;
    text-align: center;

    li {
      padding: 6px 12px;
      transition: 0.3s all;
      border-radius: 6px;
    }
    li:hover {
      transition: 0.3s all;
      background-color: #eaecf0;
    }
  }
}
.section-navbar {
  position: relative;
  .el-button + .el-button {
    margin-left: 0 !important;
  }
  span {
    vertical-align: middle;
  }
  .icons {
    vertical-align: middle;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-left: 6px;
    &-redo {
      background-image: url("../../assets/imgs/h.svg");
    }
    &-undo {
      background-image: url("../../assets/imgs/c.svg");
    }
  }

  display: grid;
  grid-template-columns: 236px 1fr;
}
.navbar {
  background-color: #f2f4f7;
}
.navtabactive {
  color: #fff;
  background-color: #6092e7 !important;
}
.logo {
  background-color: #f2f4f7;
}
.roll-btn {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  background: #f2f4f7;
  height: 32px;
  // display: none;
  &:before {
    content: "";
    position: fixed;
    top: 5px;
    bottom: 5px;
    width: 16px;
  }

  &.right-btn:before {
    left: 0;
    box-shadow: -6px 0 4px -6px rgba(0, 0, 0, 0.2);
  }

  &.right-btn:after {
    content: "";
    border-color: transparent transparent transparent #aeb5c0;
    border-style: solid none solid solid;
    border-width: 5px 0 5px 5px;
  }
  &.right-btn {
    position: fixed;
    right: 0;
    top: 40px;
  }

  &.left-btn:before {
    right: 0;
    box-shadow: 6px 0 4px -6px rgba(0, 0, 0, 0.2);
  }

  &.left-btn:after {
    content: "";
    border-color: transparent #aeb5c0 transparent transparent;
    border-style: solid solid solid none;
    border-width: 5px 5px 5px 0;
  }
  &.left-btn {
    left: 300px;
    position: fixed;
    top: 40px;
  }
}
.navbar-slide {
  overflow-x: hidden;
  > :nth-child(1) {
    transition: all 0.4s;
  }
}
@media screen and (max-width: 1800px) {
  .section-navbar {
    white-space: nowrap;
    .navbar-slide {
      position: relative;
      overflow-x: auto;
      padding-left: 10px;
      &::-webkit-scrollbar {
        display: none;
      }
      .roll-btn {
        display: flex;
      }
    }
  }
}
@media screen and (min-width: 2048px) {
  .section-navbar {
    .navbar-slide {
      > div:nth-child(1),
      ul:nth-child(1) {
        display: flex;
        justify-content: space-around;
      }
    }
  }
}

 
</style>
